<!-- 活动分享配置模块 -->
<template>
  <a-form
    ref="formRef"
    class="form"
    layout="horizontal"
    labelAlign="left"
    :hideRequiredMark="false"
    :colon="false"
    :labelCol="{ span: 24 }"
    :wrapperCol="{ span: 24 }"
    :model="model"
    :rules="props.isDetail ? [] : formRules"
  >
    <a-form-item label="同一用户可参与次数限制" name="isOnlyOneTimes">
      <a-radio-group v-model:value="model['isOnlyOneTimes']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限制</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['isOnlyOneTimes'] !== 0" label="同一用户可参与次数" name="onlyOneTimes" :wrapper-col="{ span: 12 }">
      <a-input-number v-model:value="model['onlyOneTimes']" :disabled="props.isDetail" placeholder="请输入同一用户可参与次数" :min="0" :precision="0" />
    </a-form-item>

    <a-form-item label="同一用户周期性限制参与限制" name="periodType">
      <a-radio-group v-model:value="model['periodType']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限制每日</a-radio>
        <a-radio :value="2">限制每周</a-radio>
        <a-radio :value="3">限制每月</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['periodType'] !== 0" label="同一用户周期性限制参与限制次数" name="periodTimes" :wrapper-col="{ span: 12 }">
      <a-input-number v-model:value="model['periodTimes']" :disabled="props.isDetail" placeholder="请输入同一用户周期性限制参与限制次数" :min="0" :precision="0" />
    </a-form-item>

    <a-form-item label="特殊参与限制" name="specialType">
      <a-radio-group v-model:value="model['specialType']" :disabled="props.isDetail" @change="e => specialTypeChange(e)">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">每周几可以参与</a-radio>
        <a-radio :value="2">特殊日期可以参与</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model['specialType'] === 1" label="" name="specialContent" :wrapper-col="{ span: 24 }">
      <a-checkbox-group v-model:value="model['specialContent']" :disabled="props.isDetail" :options="weekOptions" />
    </a-form-item>
    <a-form-item v-if="model['specialType'] === 2" label="" name="specialContent" :wrapper-col="{ span: 24 }">
      <div style="display: flex;gap: 20px;align-items: flex-start;">
        <a-date-picker
          v-model:value="model['allowSpecialDate']"
          :disabled="props.isDetail"
          style="width: 200px;"
          value-format="YYYY-MM-DD"
          :disabled-date="(current)=>disabledDate(current,model.specialContent)"
          @change="allowSpecialDateChange"
        />
        <div v-if="model.specialContent.length !== 0" class="ant-picker select-date">
          <div v-for="(item,index) in model.specialContent" class="select-date-item">
            <span>{{ item }}</span>
            <close-outlined v-if="!props.isDetail" @click="specialContentDeleteFunc(index)" />
          </div>
        </div>
      </div>
    </a-form-item>

    <a-form-item label="参与时间限制" name="timeType">
      <a-radio-group v-model:value="model['timeType']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限制每个可参与的天</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="model.timeType == 1" label="" name="timeStartEnd">
      <a-time-range-picker v-model:value="model['timeStartEnd']" :disabled="props.isDetail" format="HH:mm:ss" valueFormat="HH:mm:ss" :allowClear="false" />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { defineProps, defineEmits, ref, defineExpose, onMounted } from 'vue'
import { useVModel } from '@/utils/useVModel.js'
import dayjs from 'dayjs'


const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  // 表单绑定值
  modelValue: {
    type: Object,
    default: {
      timeStartEnd: [],
      isOnlyOneTimes: 0,
      periodType: 0,
      specialType: 0,
      timeType: 0,
    }
  },
  // 是否是详情
  isDetail: {
    type: Boolean,
    default: false
  },
  // 表单校验规则 使用当前组件时可以根据具体情况自定义 默认全部必填
  rules: {
    type: Object,
    default: {}
  }
})

// 表单规则（总） 默认所有字段必填 根据具体活动 某些字段可以不填 需要在组件挂载时合并传递过来的规则
const formRules = ref({
  isOnlyOneTimes: [{ required: true }],
  periodType: [{ required: true }],
  specialType: [{ required: true }],
  timeType: [{ required: true }],
  onlyOneTimes: [{ required: true, message: '请输入同一用户可参与次数', trigger: ['blur'] }],
  periodTimes: [{ required: true, message: '请输入同一用户周期性限制参与限制次数', trigger: ['blur'] }],
  specialContent: [{ required: true, message: '请选择特殊参与限制', trigger: ['blur'] }],
  timeStartEnd: [{ required: true, message: '请选择参与时间限制', trigger: ['blur'] }],
})

const model = useVModel(props, 'modelValue', emits)

// 表单实例
const formRef = ref()

// 传递表单默认值
onMounted(() => {
  emits('update:modelValue', props.modelValue)
  // 合并规则 以传递规则为准 主要用于部分活动并非所有字段都需要校验
  Object.assign(formRules.value, props.rules)
})

// 规则时间选项 每个可以参与的周几
const weekOptions = [
  { label: '周一', value: '1' },
  { label: '周二', value: '2' },
  { label: '周三', value: '3' },
  { label: '周四', value: '4' },
  { label: '周五', value: '5' },
  { label: '周六', value: '6' },
  { label: '周日', value: '0' },
]
/**
 * 特殊时间参与限制
 */
function specialTypeChange(e){
  emits('update:modelValue',{ ...props.modelValue, specialType: e.target.value, specialContent: [] })
}
function allowSpecialDateChange(e){
  // 添加选择的时间
  if(e){
    emits('update:modelValue',{ ...props.modelValue, specialContent: props.modelValue.specialContent.concat(e), allowSpecialDate: null })
  }
}
const disabledDate = (current,arr) =>{ // 对已选的特殊日期不再可选
  let flag = false
  flag =  arr.some((son,index,arr) => {
    return  current.isSame(son,'day')
  })
  return flag || current < dayjs().endOf('day').subtract(1, 'day')
}
function specialContentDeleteFunc(index){ // 删除特殊日期
  emits('update:modelValue',{ ...props.modelValue, specialContent: props.modelValue.specialContent.filter((_, i) => i !== index) })
}


// 表单校验事件
async function validateFields(fields) {
  return new Promise((resolve, reject) => {
    formRef.value.validateFields(fields).then(() => {
      resolve()
    }).catch(err => {
      reject(err)
    })
  })
}
// 表单重置事件
function clearValidate() {
  if (formRef.value !== undefined) {
    formRef.value.clearValidate()
  }
}

// 暴露表单校验事件
defineExpose({
  validateFields,
  clearValidate
})

</script>

<style lang="less" scoped>
.form{
  width: 80%;
  margin-left: 20px;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar{
    display: none;
  }
}
:deep(.ant-input-number) {
  width: 100%;
}

// 特殊参与时间样式
.select-date{
  width: 327px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  .select-date-item{
    background: #f5f5f5;
    padding: 0 4px;
    border-radius: 4px;
    flex-shrink: 0;
    user-select: none;
  }
}

</style>